<template>
   <div class="fileManage">
<!--     <el-upload
       v-if="type === '0'"
       class="upload-demo"
       action="/api/administrator/file/upload"
       :limit="1"
       :file-list="fileList">
       <el-button size="small" type="primary">点击上传</el-button>
     </el-upload>-->
     <el-button @click="choseFile" v-if="type === '0'" type="primary" size="small" style="margin-bottom: 10px;">选择文件</el-button>
     <input type="file" name="file" @change="changeFile" ref="fileIpt" style="display: none;"/>
     <BasicTablePagination :data="data" :column="column" @handler="tableHandler" @sizeChange="sizeChange" @numChange="numChange" :pagination="pagination"></BasicTablePagination>
   </div>
</template>

<script>
import BasicTablePagination from "@/components/BasicTablePagination/BasicTablePagination.vue"
import { tableColumn, tableColumn1 } from "@/constants/fileManage.js"
import { getFileList, deleteFile, fileDownload, viewFileOnline, fileUpload } from '@/api/fileManage.js'

export default {
  name: "fileManage",
  components: {
    BasicTablePagination
  },
  data() {
    return {
      data: [],
      column: tableColumn,
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      fileList: [],
      type: ''
    }
  },
  methods: {
    // 表格操作
    tableHandler(val) {
      let { type, data } = val
      console.log(type, data)
      switch(type) {
        case 'viewOnline':
          this.viewOnline(data)
          break
        case 'download':
          this.downloadFile(data)
          break
        case 'delete':
          this.deleteData(data)
          break
        default:
          break
      }
    },
    // 获取文件列表
    async getData() {
      let params = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      }
      let res = await getFileList(params)
      if (res.success == true) {
        res.data.forEach(item => {
          item.type = this.type
        })
        this.data = res.data
        this.pagination.total = res.total
      } else {
        this.$message.error(res.errorMsg)
      }
    },
    // 在线预览
    async viewOnline(val) {
      let res = await viewFileOnline(val.id)
    },
    // 文件下载
    async downloadFile(val) {
      let res = await fileDownload(val.id)
      // console.log(val)
      await this.downloadFileData(res, val.newFileName)
      /*if (res.success == true) {
        this.$message.success('下载成功！')
      } else {
        this.$message.error(res.errorMsg)
      }*/
    },
    // 删除文件
    async deleteData(val) {
      const res = await deleteFile(val.id)
      if (res.success == true) {
        this.$message.success('删除成功！')
        if (this.data.length <= 1) {
          this.pagination.pageNum = this.pagination.pageNum - 1 > 0 ? this.pagination.pageNum - 1 : 0
        }
        await this.getData()
      } else {
        this.$message.error(res.errorMsg)
      }
    },
    sizeChange(val) {
      this.pagination.pageSize = val
      this.getData()
    },
    numChange(val) {
      this.pagination.pageNum = val
      this.getData()
    },
    getType() {
      this.type = sessionStorage.getItem('type')
    },
    changeFile(e) {
      console.log(e)
      console.log(e.target.files[0])
      let fileData = new FormData()
      fileData.append('file', e.target.files[0])
      this.submit(fileData)
    },
    choseFile() {
      this.$refs.fileIpt.click()
    },
    async submit(val) {
      let res = await fileUpload(val)
      if (res.success == true) {
        this.$message.success('上传成功!')
      } else {
        this.$message.error(res.errorMsg)
      }
    },
    // 下载文件(导出)
    downloadFileData(val, fileName) {
      // 处理文件
      const blob = new Blob([val])
      console.log(blob)
      // 创建指向该文件的地址
      const url = window.URL.createObjectURL(blob)
      console.log(url)
      // 链接，用来下载
      const link = document.createElement('a')

      link.style.display = 'none'
      link.href = url
      // 添加download属性用来下载
      link.download = fileName
      // link.setAttribute('download')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      // 解除url和blob之间的联系
      URL.revokeObjectURL(url)
    }
  },
  created() {
    let type = sessionStorage.getItem('type')
    if(type == 0) {
      this.column = tableColumn
    } else {
      this.column = tableColumn1
    }
    this.getType()
    this.getData()
  }
}
</script>

<style scoped lang="sass">
.fileManage
  padding: 20px
</style>
